import React, { Component } from 'react'
import { Form, Input } from 'antd'
import { connect } from 'dva'

@connect(({ user }) => ({
  user
}))
@Form.create({ name: 'login' })
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      }
    }
  }

  loginSubmit = () => {
    const { dispatch } = this.props
    const { username, password } = this.state
    dispatch({
      type: 'user/login',
      payload: {
        username,
        password
      }
    })
  }

  render() {
    const { form: { getFieldDecorator } } = this.props
    // const { formItemLayout, tailFormItemLayout } = this.state
    return (
      <div>
        <Form onSubmit={this.loginSubmit}>
          <Form.Item label="username">
            {
              getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your username'
                  }
                ]
              })(<Input />)
            }
          </Form.Item>
        </Form>
      </div>
    );
  }

}

export default Login
